<template>
    <div class="memberContacts">
        <div class="menuWrapper">
            <ul>
                <li :class="categoryId==null?'on':''" @click="changeCate({ categoryId: null })"><span>全部菜品</span></li>
                <li v-for="(item,index) in categories" @click="changeCate(item)" :class="item.categoryId==categoryId?'on':''" :key="index"><span>{{item.categoryName}}</span><!--<i class="num">4</i>--></li>
            </ul>
        </div>
        <div class="foodsWrapper">
            <div class="memberList">
                    <memberItem
                     v-for="(item,index) in proList" :key="index"
                        :item="item"
                        :increaseFn="increase"
                        :decreaseFn="decrease" />
            </div>
        </div>

        <!-- 弹窗 -->
        <productMethods ref="productMethods"/>
        <packageProduct ref="packageProduct"/>
        <!-- <singleProModal ref="singleProModal"></singleProModal> -->
    </div>
</template>
<script>
import BScroll from '@better-scroll/core'
import Pullup from '@better-scroll/pull-up'

BScroll.use(Pullup)
import productMethods from "@/components/productMethods/productMethods.vue"
import packageProduct from "@/components/packageProduct/packageProduct.vue"
import {
		GetCategories,GetProductList,AddCart
	} from '@/api/order.js'
    
import { mapMutations,mapState } from "vuex";
import memberItem from "./memberItem"
export default {
  name: 'Products',
  components: {
    memberItem,
    productMethods,
    packageProduct
  },
  data () {
    return {
        currentCate:0,
        categoryId: null,
        type: -1,
        keyword: '',
        pageIndex: 1,
        proList: [],
        categories: {},
        isPullUpLoad: false
    }
  },
  provide() {
    return {
      openModal: this.openPop,
    };
  },
  computed: {
    ...mapState({
      visible: (state) => state.visible,
      shoppingList(state) {return state.cartModule.shoppingList},
    }),
  },
  mounted(){
        this.reqGetCategories()
        this.reqGetProductList()
        // this.$nextTick(()=>{
        //     this.$refs.packageProduct.showPopup();
        // })
    },
  methods:{
        // ------------------vuex----------------------------
        /**
         * @description 增加/减少商品
         */
        ...mapMutations(["increasePro", "decreasePro", "setMultipleVisible"]),
        //---------------------产品操作-----------------------
        /**type 普通:0  原料:2  套装:3  服务:4  菜品:5 */
        /**
         * @description 购物车不显示时不做操作
         */
        cando() {
            let { cartVisible } = this.visible;
            return cartVisible;
        },
        changeCate(item){
            this.categoryId = item.categoryId
            this.search()
        },
        /**
         * @description 搜索
         * 1.pageIndex=1
         * 2.执行请求
         * 3.返回顶部
         */
        search() {
            this.pageIndex = 1;
            this.reqGetProductList();
        },
        /**
         * @description 购物车 编辑事件
         * @param {{item:Object,needReq:Boolean,isModify:Boolean}} params
         */
        modifyEvent(params) {
            if (this.cando() == false) return;
            let popName = "";
            if (params.item.type == 3) {
                popName = "packageProduct";
            }
            if (params.item.type == 5) {
                popName = "productMethods";
            } else {
                popName = "singleProModal";
            }
            this.openPop(popName, params);
        },
        decrease(item) {
            //this.decreasePro({ item });
            this.$store.dispatch('decreasePro',{ item: item });
        },
        async increase(item) {
            //if (this.cando() == false) return;
            let { type } = item;
            let defaultParams = {
                item,
                needReq: true,
            };
            if (type == 3) {
                this.openPop("packageProduct", {
                    ...defaultParams,
                    cb: this.packageModalCallBack,
                });
            } else if (type == 5) {
                this.openPop("productMethods", {
                    ...defaultParams,
                    cb: this.methodModalCallBack,
                    popType: 1,
                });
            } else {
                let copyItem = item?.isWeightingSale == true ? { ...item } : item;
                this.$store.dispatch('increasePro',{ item: copyItem });
            }
        },
        /**
         * @description 套餐弹窗回调
         */
        packageModalCallBack(params) {
            let { mapItem } = params;
            this.$store.dispatch('increasePro',{ item: mapItem });
            //this.increasePro({ item: mapItem });
        },
        /**
         * @description 菜品做法弹窗回调
         */
        methodModalCallBack(params) {
            let { mapItem } = params;
            this.$store.dispatch('increasePro',{ item: mapItem });
            //this.increasePro({ item: mapItem });
        },
        /**
         * @description 添加购物车
         */
        async addCart(newItem){
            newItem.qry = 1
            let items = [];
            items.push(newItem)
            let param = {
                tableId: this.$store.state.tableInfo.tableId,
                peopleCount: this.$store.state.tableInfo.num,
                comment: "",
                items: items
            }
            let { returnData = false }  = await AddCart(param)
            if(returnData == false) return
            this.tableObject = returnData
            // this.tableObject = [
            //     {
            //         "productId": "154cf763-3071-4859-b7d1-1b4a45cfd534",
            //         "mainImageUrl": "",
            //         "type": 0,
            //         "salePrice": 0,
            //         "isWeightingSale": false,
            //         "model": "",
            //         "productName": "上汤",
            //         "baseUnitId": "61c44948-bf4b-19b0-00df-85c75be6c7b1",
            //         "categoryId": "719e1b87-51c1-4ec1-bd45-ec67cf271e5e",
            //         "sellOut": false,
            //         "unitName": "克",
            //         "packages": [],
            //         "configs": [],
            //         "sku": [],
            //         "configSellOut": [],
            //         "qty": 0,
            //         "guid": "33c9550a-f60d-4778-9231-71657fee3c95",
            //         "sumCount": 1
            //     }
            // ]
            //!_.isEqual(this.$store.state.cartModule.shoppingList,this.tableObject)&&this.setShoppintList({list:this.tableObject})
        },
        async reqGetCategories() {
            let { returnData = false } = await GetCategories();
            if (returnData == false) return;
            this.categories = returnData;
        },
        async reqGetProductList() {
            let params = {
                categoryId: this.categoryId,
                type: this.type,
                keyword: this.keyword,
                pageIndex: this.pageIndex,
            };
            let { returnData = false } = await GetProductList(params);
            if (returnData == false) return;
            if (returnData.data.length <= 0) this.proList = [];
            let arr = returnData.data;
            this.pageCount = returnData.pageCount
            arr.forEach((item) => {
                item.qty = 0;
            });
            if (this.pageIndex == 1) {
                this.proList = arr;
            } else {
                this.proList.push(...arr);
            }
            this.$nextTick(()=>{
                if(!this.menuScroll&&!this.foodsScroll){
                    this._initScroll()
                }else{
                    this.foodsScroll.refresh()
                }
            })
        },
        /**
         * @description 打开弹窗
         */
        openPop(refName, params) {
            this.$store.commit("setMultipleVisible", {
                list: ["cartVisible"],
                show: true,
            });
            this.$refs[refName].showPopup(params);
        },
        _initScroll(){
            this.menuScroll = new BScroll(".menuWrapper",{
                click: true,
                useTransition: false
            })
            this.foodsScroll = new BScroll(".foodsWrapper",{
                click: true,
                pullUpLoad: true,
                useTransition: false
            })
            this.foodsScroll.on('pullingUp', this.pullingUpHandler)
        },
        async pullingUpHandler() {
            this.isPullUpLoad = true
            this.pageIndex++
            if(this.pageIndex > this.pageCount) {
                console.log('滚动到底了')
                this.foodsScroll.finishPullUp()
                this.isPullUpLoad = false
                return
            }
            await this.reqGetProductList()

            this.foodsScroll.finishPullUp()
            this.foodsScroll.refresh()
            this.isPullUpLoad = false
        },
        toDetail(){
            this.$router.push({path:'/detail',query:{id:'1'}})
        }
  }
}
</script>
<style lang="scss" scoped>
.memberContacts{ display: flex; display: -webkit-flex; /* position: absolute; top: 9.85rem; bottom: 0; */ width: 100%; height: calc(100% - 2.2rem - 2.4% - 2.25rem); overflow: hidden;
    .menuWrapper{ flex: 0 0 4.4rem; -webkit-flex: 0 0 4.4rem; width: 4.4rem; /*background-color: #f8f8f8;*/ font-size: 0.65rem;
        li{ position: relative; padding: 0.5rem 0; text-align: center; color: #929292;
            span{ display: block; line-height: 2;}
            .num{
                position: absolute;
                top: 0rem;
                right: 0.4rem;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 50%;
                min-width: 0.8rem;
                height: 0.8rem;
                font-style: normal;
                font-size: 0.6rem;
                background-color: #ff0000;
                color: #fff;
            }
            &.on{ background-color: #fff;
                span{ border-left: 4px solid $mainColor; color: #333; }
            }
        }

    }
    .foodsWrapper{ flex:1; -webkit-flex:1; font-size: 0.7rem; background-color: #fff; overflow: hidden;
        .memberList{
            .title{ display: block; padding: 0.2rem 0 0.2rem 1rem; font-size: 0.6rem; color: #000; background-color: #e0e0e0;}
            .memberItem{ display: flex; display: -webkit-flex;  padding: 0.5rem; border-bottom: 1px solid #ccc;
                .photo{ display: block; width: 4rem; height: 4rem; overflow: hidden; border-radius: 0.3rem; object-fit: cover;}
                .content{ margin-left: 0.5rem; display: flex; display: -webkit-flex; flex-direction: column; -webkit-flex-direction: column; justify-content: space-between; -webkit-justify-content: space-between; flex: 1; -webkit-flex: 1;
                    .name{ display: block; line-height: 1.5;}
                    .stores{ display: inline-block; padding: 0.1rem 0.2rem; color: #ff9908; font-size: 0.6rem; border: 1px solid #ff9908; border-radius: 0.2rem; align-self: flex-start;}
                    .company{  display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; line-height: 1.5;   
						.addIcon{ width: 1.2rem; height: 1.2rem; /*background: url(../images/icon/addIcon_cart.png) no-repeat;*/ background-size: cover;}
                    }
                    .keyWord{ color: #2b59aa; font-weight: normal;}
                }
                &:last-child{  border-bottom: none;}
            }
        }
        .classifyList{ display: flex; flex-wrap: wrap; margin-left: 0.5rem; padding-bottom: 0.5rem;
            .classifyItem{ display: inline-block; padding: 0.2rem 0.5rem; margin: 0 0.2rem 0.2rem 0;  color: #929292; border: 1px solid #929292; border-radius: 0.5rem; line-height: 1.2;
				&.on{ color: $redColor; border: 1px solid $redColor;}
            }
            &:first-child{ padding-top: 0.5rem;}
            
        }
        .subClassifyList{ margin-left: 0.5rem;
			.classifyItem{ display: inline-block; padding: 0.2rem 0.2rem; margin: 0 0.2rem 0.2rem 0;  color: #929292; line-height: 1.2;
				&.on{ color: #000;}
            }
        }
        .addSubtWrapper{ display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: space-between; -webkit-justify-content: space-between;
			.total{ width: 4rem;}
			.addSubt{ width: 4rem; height: calc(1rem + 2px); display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: flex-end; -webkit-justify-content: flex-end; font-size: 0.8rem; overflow: hidden; white-space: nowrap;}
			.operate{ width: 1rem; height: 1rem; line-height: 1rem;  text-align: center; cursor: pointer; color: #feb229; border: 1px solid $mainColor; border-radius: 4px;
				&:last-child{ border: 1px solid $mainColor; background-image: linear-gradient(to right,$mainColor,#ffae44); color: #fff;}
			}
			.much{ width: calc(100% - 2rem - 2px); background-color: transparent; height: 1rem; line-height: 1rem;  text-align: center; outline: none; border: none; border-radius: 0;}
		}
    }
}
</style>